ControlValueAccessor (Custom inputs)

Como crear un input customizado que podamos reutilizar en distintos formGroups.

Cuando usando un input dentro de un formGroup tenemos que identificarlo con formControlName, para que un componente nos permita esto tenemos que hacer que implemente ControlValueAccessor

Para crear un componente que implemente ControlValueAccessor, tenemos que hacer lo siguiente:

• Añadir el "implements ControlValueAccessor" a la clase
• Inyectar NgControl
• Declarar los metodos necesarios para la interfaz (en este caso los podemos dejar vacios, ya que no queremos tratar los datos de ninguna manera)

El componente debería de quedar así:

my-custom-input.component.ts

export class MyCustomInputComponent implements ControlValueAccessor {
 
  constructor(
    @Self() public ngControl: NgControl,
  ){
    this.ngControl.valueAccessor = this;
  }

  get control(): FormControl {
    return this.ngControl.control as FormControl;
  }
 
  writeValue(obj: any): void {
  }
  registerOnChange(fn: any): void {
  }
  registerOnTouched(fn: any): void {
  }
  setDisabledState?(isDisabled: boolean): void {
  }

}

Y en la plantilla tenemos que usar el getter que hemos definido para acceder al ngControl ("control" en este caso) y asociarlo al input usando [formControl], asi:

my-custom-input.component.html

<p>my-custom-input works!</p>
<input
    type="text"
    [formControl]="control"
 />

Una vez hecho esto el componente ya está listo para ser usando con un formGroup.

Para utilizarlo solo tenemos que ponerlo dentro del formGroup que queramos y asociarle un formControlName, tal que así:

Angular | Forms | ControlValueAccessor | Custom | Input